<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增城市</a-button>
      </template>
      <template #function="{ record }">
        <span v-for="(item, index) in record.module" :key="index">
          {{ item }}/
          <!-- <span v-if="index">/</span> -->
        </span>
      </template>
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>

    <Modal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import {
    ActionItem,
    BasicColumn,
    BasicTable,
    EditRecordRow,
    FormSchema,
    useTable,
    TableAction,
  } from '/@/components/Table';
  import { ListApi, UpdateApi, EditApi } from '/@/api/setCenter/cityManagement';
  import { onlineStatus, cityStatus } from '/@/assets/dic';
  import formatDic from '/@/utils/formatDic';
  import { UserItem } from '/@/api/user/userModel';
  import Modal from './modal.vue';
  import { useModal } from '/@/components/Modal';

  const columns: BasicColumn[] = [
    {
      title: '城市',
      dataIndex: 'city',
    },
    {
      title: '已开通功能',
      dataIndex: 'module',
      slots: { customRender: 'function' },
    },
    {
      title: '状态',
      dataIndex: 'isUse',
      format: formatDic(cityStatus),
    },
  ];

  const colProps = {
    span: 4,
  };
  const schemas: FormSchema[] = [
    {
      label: '城市：',
      field: 'publisher',
      component: 'Input',
      colProps,
    },
    {
      label: '状态：',
      field: 'isUse',
      component: 'Select',
      componentProps: {
        options: cityStatus,
      },
      colProps,
    },
  ];

  export default defineComponent({
    name: 'AverageUser',
    components: {
      BasicTable,
      TableAction,
      Modal,
    },
    setup() {
      // const selectedRowKeys = ref<string[]>([]);
      const [registerModal, { openModal }] = useModal();
      const [registerTable, { reload, getSelectRows }] = useTable({
        api: ListApi,
        useSearchForm: true,
        rowSelection: {
          type: 'checkbox',
        },
        columns,
        formConfig: {
          schemas,
          labelWidth: 100,
        },
        actionColumn: {
          width: 180,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      function handleSuccess() {
        console.log(1111);
        reload();
      }

      // //已开通的活动数据处理
      // function a(module: any) {
      //   record.module.forEach((item) => {});
      // }
      // 改变用户的使用状态
      function handleChangeStatus(record: UserItem) {
        const params = {
          id: record.id,
          status: 0,
        };
        params.status = record.isUse === 0 ? 1 : 0;
        console.log(record, params);
        EditApi(params).then((_) => {
          reload();
        });
      }

      // 删除用户
      // function handleDeletUser(ids: number | number[]) {
      //   DeleteApi(ids).then((_) => {
      //     reload();
      //   });
      //   console.log(ids);
      // }

      // 拿到需要批量删除的id
      // function handleBatchDeletUser() {
      //   const selectRows = getSelectRows();
      //   const ids = selectRows.map((item) => item.id);
      //   handleDeletUser(ids);
      // }
      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
        return [
          {
            label: '编辑',
            color: 'success',
            onClick() {
              openModal(true, {
                record,
                isUpdate: true,
              });
            },
          },
          {
            label: record.isUse === 0 ? '禁用' : '启用',
            onClick: handleChangeStatus.bind(null, record as UserItem),
          },
        ];
      }
      return {
        registerTable,
        createActions,
        // handleBatchDeletUser,
        registerModal,
        handleSuccess,
        handleCreate,
      };
    },
  });
</script>
<style lang="less" scoped></style>
